<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
	<script src="js/jquery-1.11.1.min.js"></script>

	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.wrap{
			width: 780px;
			height: 380px;
			overflow: hidden;
			position: relative;
		}
		.wrap .pics li{
			width:780px;
			float: left;
			list-style: none;
		}
		.wrap .pics li img{
			display: block;
		}
		.wrap .pics{
			width: 3900px;

		}
		.wrap .picNav li{
			width: 156px;
			height: 50px;
			float: left;
			list-style: none;
			background-color: black;
			color: white;
			line-height: 50px;
			text-align: center;
		}
		.wrap .picNav .active{
			background-color: red;
			color:blue;
		}
		.wrap span{
			width: 50px;
			height: 50px;
			background-color: #ccc;
			position: absolute;
			left: 0;
			top:137px;
			font-size: 40px;
			border-radius: 50%;
			text-align: center;
			line-height: 50px;
			opacity: 0.4
		}
		.wrap .picRight{
			left: 730px;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<ul class="pics">
			<li>
				<img src="http://ossweb-img.qq.com/upload/adw/image/20180907/f5f977d8fb73c74b95cea639287731a8.jpg" alt="">
			</li>
			<li>
				<img src="http://ossweb-img.qq.com/upload/adw/image/20180913/be03a5d0ebe5d46c4ff8ca7c5bdbde0b.jpg" alt="">
			</li>
			<li>
				<img src="http://ossweb-img.qq.com/upload/adw/image/20180907/d50b8d9c637b31b7a126f7a6ad567bba.jpg" alt="">
			</li>
			<li>
				<img src="http://ossweb-img.qq.com/upload/adw/image/20180911/d0c78c8cf0ea007281572a6da71e7dc6.jpg" alt="">
			</li>
			<li>
				<img src="http://ossweb-img.qq.com/upload/adw/image/20180913/e4dc5d051d9ca0ef4c99d62cec0b4612.jpg" alt="">
			</li>
		</ul>
		<ul class="picNav">
			<li class="active">魔影秘藏</li>
			<li>七周年15点直播</li>
			<li>7周年战斗之夜</li>
			<li>西部魔影全新皮肤</li>
			<li>玉剑传说限时销售
			</li>
		</ul>
		<span class="picLeft">&lt;</span>
		<span class="picRight">&gt;</span>
	</div>

	<script>
		$(function(){
			function moveUl(index){ //移动ul的函数
				$(".pics").stop().animate({
						"marginLeft":-780*index+"px"
					},200)	
			}
			function activeLi(index){//选中li的函数
				$(".picNav li").eq(index).addClass("active").siblings().removeClass("active")
			}
			$(".picNav").find("li").mouseenter(function(){
				    index=$(this).index()
					activeLi(index)
					moveUl(index)
			})
			var index=0;
			$(".picLeft").click(function(){
				index==4?index=0:index++;
				moveUl(index)	
				activeLi(index)
			})
			$(".picRight").click(function(){
				index==0?index=4:index--
				moveUl(index)
				activeLi(index)
			})
		})
	</script>
</body>
</html>